<template>
	<view class="indexBox">
		<!-- 轮播 -->
		<swiper indicator-dots autoplay circular :interval="3000" :duration="1000" indicator-active-color="#41a863">
			<swiper-item v-for="(item,index) in swiper" :key='item'>
				<image :src="item" @click="preView(index)"></image>
			</swiper-item>
		</swiper>
		<!-- 分类导航 -->
		<view class="flex sortNav PB">
			<view class="flex sortNavItem" v-for="item in sortNav" :key='item.name' @click="pathTo(item.path)">
				<view class="flex icon MB">
					<text :class="['iconfont',item.icon]"></text>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="recommendGoods">
			<view class="PTB">
				<text space="nbsp">推 荐 商 品</text>
			</view>
			<!-- 商品列表 -->
			<GoodsList :hotDoorGoods='hotDoorGoods' :hotDoorGoodsImage='hotDoorGoodsImage' />
		</view>
	</view>
</template>

<script>
	import GoodsList from '@/components/goodsList.vue'
	export default {
		data() {
			return {
				// 轮播数据
				swiper: [],
				// 导航数据
				sortNav: [{
					name: '黑马超市',
					icon: 'icon-ziyuan',
					path: '/pages/goods/goods'
				}, {
					name: '联系我们',
					icon: 'icon-guanyuwomen',
					path: '/pages/contact/contact'
				}, {
					name: '社区图片',
					icon: 'icon-tupian',
					path: '/pages/pics/pics'
				}, {
					name: '学习视频',
					icon: 'icon-shipin',
					path: '/pages/videos/videos'
				}],
				// 热门商品数据
				hotDoorGoods: [],
				// 热门商品图片
				hotDoorGoodsImage: [
					'//gw.alicdn.com/bao/upload/O1CN01oVqQx41mUoPHJzeUc_!!6000000004958-2-yinhe.png',
					'//gw.alicdn.com/bao/upload/O1CN01VwgRNv1X5sbpYucDM_!!6000000002873-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01WvkTu21GEGOMzBW0V_!!6000000000590-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01LDIOZE1t4tIif7fiK_!!6000000005849-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01QP5xYu1VTZs9lVVqn_!!6000000002654-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01O22k1o1qYFqVAYl9D_!!6000000005507-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01rKFawo1ag0haJcmKj_!!6000000003358-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01CyjsN71Y6csF3v9Sj_!!6000000003010-2-yinhe.png',
					'//gw.alicdn.com/bao/upload/O1CN01sH9nVR296IN2BqCq3_!!6000000008018-0-yinhe.jpg_Q75.jpg',
					'//gw.alicdn.com/bao/upload/O1CN01mkLtjG1sy1MYNblLA_!!6000000005834-0-yinhe.jpg_Q75.jpg'
				],
			}
		},
		components:{
			GoodsList
		},
		onLoad() {
			this.reqRotation();
			this.reqHotDoorGoods()
		},
		methods: {
			// 请求轮播数据
			async reqRotation() {
				const {
					data
				} = await this.$myRequest({
					url: '/api/getlunbo'
				})
				data.message.forEach(v => this.swiper.push(v.img));
			},
			// 预览图片
			preView(i) {
				uni.previewImage({
					current: i,
					urls: this.swiper
				})
			},
			// 获取热门商品列表数据
			async reqHotDoorGoods() {
				const {
					data
				} = await this.$myRequest({
					url: '/api/getgoods?pageindex=1'
				});
				this.hotDoorGoods = data.message;
			},
			// 分类导航跳转详情页
			pathTo(url) {
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sortNav {
		height: 200rpx;
		margin-top: 20rpx;
		justify-content: space-around;
		border-bottom: 4rpx solid $themeColor;

		.sortNavItem {
			flex-wrap: wrap;

			.icon {
				color: #fff;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				background-color: $themeColor;

				text {
					font-size: 60rpx;
				}

				.icon-tupian {
					font-size: 50rpx;
				}
			}
		}
	}

	.recommendGoods {
		.PTB {
			font-size: 40rpx;
			color: $themeColor;
			text-align: center;
		}
	}
</style>
